<template lang="pug">
  div(class="login")
    img(src="./assets/img/logo.svg")
    el-form(:model="form" :rules="rules" ref="loginForm")
        el-form-item(prop="phone")
            el-input(placeholder="请输入账号" v-model="form.phone" autocomplete="off")
        el-form-item(prop="password")
            el-input(type="password" placeholder="请输入密码" v-model="form.password" autocomplete="off")
        el-form-item(prop="captcha" v-if="showCaptcha")
            el-col(:span="16")
                el-input(placeholder="请输入验证码" v-model="form.captcha")
            el-col(:span="8")
                img(:src="'data:image/jpeg;base64,'+captImg" @click="getCaptcha")
        el-form-item
            el-checkbox(v-model="remember") 记住密码
        el-form-item
            el-button(type="primary" @click="login") 登录
</template>
<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { loginSub, checkNeedCaptcha, generCaptcha } from 'service/login.ts'
import md5 from 'js-md5'
import storage from 'assets/js/storage'
@Component({
    name: 'login'
})
export default class login extends Vue {
    // PASSWORD_PLACEHOLDER = '****************' // 16
    rules: Object = {
        phone: [
            { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        captcha: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
    };
    form: any = {
        phone: '',
        password: '',
        captcha: '',
        token: '',
        userType:1
    }
    remember: boolean = true
    captImg: string = ''
    showCaptcha: boolean = false
    rem:any=storage.getRemember()
    mounted() {
        if(this.rem&&this.rem.remember){
             this.form.phone = this.rem.phone
             this.form.password = this.rem.password
             this.form.captcha = this.rem.captcha
             this.remember=this.rem.remember
        }
    }
    async login() {
        (this.$refs.loginForm as any).validate(async (valid: boolean) => {
            if (valid) {
                if (!await this.checkNeedCaptcha()) {
                    this.submitData()
                }else{
                    if(this.form.token){
                        this.submitData()
                    }
                }
            }
        });

    }
    async submitData(){
                    let password = ''
                    if(this.rem&&this.rem.remember){
                        password = this.form.password
                    }else{
                        password = md5(this.form.password+'yjfggt')
                    }
                    let { data } = await loginSub({ ...this.form, password: password })
                    if (data.success) {
                        if(this.remember){
                            storage.setRemember(JSON.stringify({...this.form,remember:this.remember,password:password}))
                        }else{
                    storage.removeRemember()
                }
                        storage.setAccessToken(data.data.accessToken)
                        storage.setCurrentUserInfo(JSON.stringify(data.data))
                        this.$router.push('/')
                    } else {
                        this.$message(data.message)
                    }

    }
    async getCaptcha() {
        let { data } = await generCaptcha()
        if (data.success) {
            this.captImg = data.data.img
            this.form.token = data.data.token
        }
    }
    async checkNeedCaptcha() {
        let { data } = await checkNeedCaptcha({ account: this.form.phone })
        if (data.success) {
            if (data.data) {
                this.getCaptcha()
                this.showCaptcha = true
            }
            return data.data
        } else {
            return false
        }
    }
    // async checkNeedCaptcha() {
    //     let { phone: account, plaform } = this.form
    //     let { data } = await checkNeedCaptcha({ account, plaform })
    //     if (data.success) {
    //         if (data.data) {
    //             let { data } = await generCaptcha()
    //             if (data.success) {
    //                 this.captImg = data.data
    //                 this.showCaptcha = true
    //             }
    //         }
    //         return data.data
    //     } else {
    //         return false
    //     }
    // }
}
</script>
<style lang="stylus" scoped>
.login
    width 500px
    height 500px
    border-radius 4px
    background white
    padding 40px
    margin auto
    margin-top 50px
    img 
        width 80%
        height 40px
        margin auto
        display block
        margin-bottom 30px
    button
        width 100%
</style>


